<template>
	<view>
		<view class="flex-row py20">
			<view class="flex-row justify-center" style="flex: 1;">
				<view class="">选择星座：</view>
				<picker @change="changeHoroList" :range="horoList" range-key="name" :value="horoIndex">
					<view>{{horoList[horoIndex].name}}</view>
				</picker>
			</view>
			<view  class="flex-row justify-center" style="flex: 1;">
				<view class="">选择日期：</view>
				<picker @change="changeDateList" :range="dateList" range-key="text" :value="dateIndex">
					<view>{{dateList[dateIndex].text}}</view>
				</picker>
			</view>
		</view>
		
		<view v-if="horo">
			<view class="flex-row">
				<view class="flex-column justify-center" style="width: 30%;text-align: center;">
					<view class="">
						<image style="width: 200rpx;height: 200rpx;" :src="`/static/image/horo/${horo.name}.gif`" mode="scaleToFill" ></image>
					</view>
					<view>{{horo.title}}</view>
					<view style="font-size: 25rpx;">{{dates}}</view>
				</view>
				<view class="flex-column" style="width: 70%;">
					<view class="flex-row justify-center" style="font-weight: bold;">
						<view class="flex-row justify-center" style="flex: 1;font-size: 38rpx;color: darkseagreen;">宜</view>
						<view class="flex-row justify-center" style="flex: 1;font-size: 38rpx;color: coral;">忌</view>
					</view>
					<view class="flex-row" style="font-size: 28rpx;">
						<view class="flex-row justify-center" style="flex: 1;">{{horo.todo.yi}}</view>
						<view class="flex-row justify-center" style="flex: 1;">{{horo.todo.ji}}</view>
					</view>
					
					<view class="flex-row justify-center" style="font-size: 28rpx;font-weight: bold;margin-top: 40rpx;">
						<view class="flex-row justify-center" style="flex: 1;">
							<view class="">{{horo.luckycolor}}</view>
						</view>
						<view class="flex-row justify-center" style="flex: 1;">
							<view class="">{{horo.luckynumber}}</view>
						</view>
						<view class="flex-row justify-center" style="flex: 1;">
							<view class="">{{horo.luckyconstellation}}</view>
						</view>
					</view>
					<view class="flex-row justify-center" style="font-size: 28rpx;">
						<view class="flex-row justify-center" style="flex: 1;">
							<view class="">幸运颜色</view>
						</view>
						<view class="flex-row justify-center" style="flex: 1;">
							<view class="">幸运数字</view>
						</view>
						<view class="flex-row justify-center" style="flex: 1;">
							<view class="">速配星座</view>
						</view>
					</view>
					<view class="flex-row" style="margin-top: 40rpx;">
						<text>短评：</text><text>{{horo.shortcomment}}</text>
					</view>
				</view>
			</view>
			
			<uni-section title="综合指数" type="line"></uni-section>
			<view class="flex-row">
				<view class="flex-row justify-center" style="flex: 1;">{{horo.index.all}}</view>
				<view class="flex-row justify-center" style="flex: 1;">{{horo.index.love}}</view>
				<view class="flex-row justify-center" style="flex: 1;">{{horo.index.work}}</view>
				<view class="flex-row justify-center" style="flex: 1;">{{horo.index.money}}</view>
				<view class="flex-row justify-center" style="flex: 1;">{{horo.index.health}}</view>
			</view>
			<view class="flex-row">
				<view class="flex-row justify-center" style="flex: 1;">综合</view>
				<view class="flex-row justify-center" style="flex: 1;">爱情</view>
				<view class="flex-row justify-center" style="flex: 1;">事学</view>
				<view class="flex-row justify-center" style="flex: 1;">财富</view>
				<view class="flex-row justify-center" style="flex: 1;">健康</view>
			</view>
			
			<uni-card>
				<template v-slot:title>
					<view class="flex-row" style="justify-content: space-between;">
						<view class="">综合运势</view>
						<view class="">
							<uni-rate :touchable="false" :value="horo.fortune.all" :readonly="true"/>
						</view>
					</view>
				</template>
				{{horo.fortunetext.all}}
			</uni-card>
			
			<uni-card>
				<template v-slot:title>
					<view class="flex-row" style="justify-content: space-between;">
						<view class="">感情运势</view>
						<view class="">
							<uni-rate :touchable="false" :value="horo.fortune.love" :readonly="true"/>
						</view>
					</view>
				</template>
				{{horo.fortunetext.love}}
			</uni-card>
			
			<uni-card>
				<template v-slot:title>
					<view class="flex-row" style="justify-content: space-between;">
						<view class="">工作运势</view>
						<view class="">
							<uni-rate :touchable="false" :value="horo.fortune.work" :readonly="true"/>
						</view>
					</view>
				</template>
				{{horo.fortunetext.work}}
			</uni-card>
			
			<uni-card>
				<template v-slot:title>
					<view class="flex-row" style="justify-content: space-between;">
						<view class="">财富运势</view>
						<view class="">
							<uni-rate :touchable="false" :value="horo.fortune.money" :readonly="true"/>
						</view>
					</view>
				</template>
				{{horo.fortunetext.money}}
			</uni-card>
			
			<uni-card>
				<template v-slot:title>
					<view class="flex-row" style="justify-content: space-between;">
						<view class="">健康运势</view>
						<view class="">
							<uni-rate :touchable="false" :value="horo.fortune.health" :readonly="true"/>
						</view>
					</view>
				</template>
				{{horo.fortunetext.health}}
			</uni-card>
		</view>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	//import horoList from '@/utils/horo.json';

	const horoList =ref([
		{name:'白羊座',code:'aries',date:'3月21日-4月20日'},
		{name:'金牛座',code:'taurus',date:'4月21日-5月22日'},
		{name:'双子座',code:'gemini',date:'5月21日-6月21日'},
		{name:'巨蟹座',code:'cancer',date:'6月22日-7月22日'},
		{name:'狮子座',code:'leo',date:'7月23日-8月22日'},
		{name:'处女座',code:'virgo',date:'8月23日-9月22日'},
		{name:'天秤座',code:'libra',date:'9月23日-10月23日'},
		{name:'天蝎座',code:'scorpio',date:'10月24日-11月21日'},
		{name:'射手座',code:'sagittarius',date:'11月22日-12月21日'},
		{name:'摩羯座',code:'capricorn',date:'12月22日-1月20日'},
		{name:'水瓶座',code:'aquarius',date:'1月21日-2月19日'},
		{name:'双鱼座',code:'pisces',date:'2月20日-3月20日'}
	]);
	const dateList=ref([
		{text:'今日',value:'today'},
		{text:'明天',value:'nextday'},
		{text:'本周',value:'week'},
		{text:'本月',value:'month'}
	]);
	const horoIndex=ref(0);
	const dateIndex=ref(0);
	const horo=ref(null);
	const dates=ref(horoList.value[0].date);
	
	function getData () {
		uni.showLoading({title:'获取数据中...',mask:true});
		uni.request({
			url: 'https://api.vvhan.com/api/horoscope',
			method: 'GET',
			data: {
				type:horoList.value[horoIndex.value].code,
				time:dateList.value[dateIndex.value].value
			},
			success: res => {
				horo.value=res.data.data;
				console.log(horo.value);
			},complete: () => {
				uni.hideLoading();
			}
		});
	}
	
	function changeHoroList (e) {
		horoIndex.value=e.detail.value;
		dates.value=horoList.value[horoIndex.value].date;
		getData();
	}
	
	function changeDateList (e) {
		dateIndex.value=e.detail.value;
		getData();
	}
	getData();
</script>
<style>
	       
</style>
